import {
    Card,
    Image,
    Row,
    Col,
    Space,
    Descriptions,
    Button,
    Avatar,
    message,
    Modal,
    Form,
    Input,
} from 'antd';
import ProForm, {
    ProFormDependency,
    ProFormRadio,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton
} from '@ant-design/pro-form';
import type { FC } from 'react';
import { useState, useEffect } from 'react';
import { useRequest, history, useModel } from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import RichText from '@/components/RichText';
import { queryAuthDoctorDetail, approveDoctor, doctorAttestation, listByCode, hospitalInfo } from './service';
import laca from '../../../public/u44.png'
import yishn from '../../../public/yishn.png'

import { Color } from '@antv/l7-react/lib/component/LayerAttribute';
const { TextArea } = Input;
const BasicForm: FC<Record<string, any>> = () => {
    const [open, setOpen] = useState(false);
    const [dataF, setdataF] = useState(true);
    const [visible, setvisible] = useState(false);
    // const [data, setData] = useState(null);
    const [dataStatus, setdataStatus] = useState(4);
    const [hospitalNameData, sethospitalNameData] = useState([]);
    const [hospitalIdData, sethospitalIdData] = useState('');
    const [deptName, setdeptName] = useState([]);
    const [arrYY, setarrYY] = useState([]);
    const [hospitalId, sethospitalId] = useState('');
    const [deptSecondId, setdeptSecondId] = useState('');
    const [dataValue, setdataValue] = useState({});
    const [form] = Form.useForm();
    const { initialState, setInitialState } = useModel('@@initialState');
    const { currentUser } = initialState;
    // const { id } = history.location.query;

    // const { data } = useRequest(() => {
    //     if (id) {
    //         return queryAuthDoctorDetail({ id:  id: currentUser.id });
    //     }
    // });        
    const getDataopoo = async () => {
        const { data } = await queryAuthDoctorDetail({ id: currentUser.id });
        setdataValue(data)
        setdataStatus(data == null ? '4' : data.status)
    };
    useEffect(() => {
        getDataopoo();
    }, []);
    const onFinish = async (value: any) => {
        if (value.upload && value.upload[0].response) {
            value.headUrl = value.upload[0].response.data.url
        }
        // if (value.idCardFrontload && value.idCardFrontload[0].response) {
        //     value.idCardFront = value.idCardFrontload[0].response.data.url
        // }
        // if (value.idCardBackload && value.idCardBackload[0].response) {
        //     value.idCardBack = value.idCardBackload[0].response.data.url
        // }
        if (value.doctorQCerttUrlListload && value.doctorQCerttUrlListload[0].response) {
            value.doctorQCert = value.doctorQCerttUrlListload[0].response.data.url
        }
        if (value.doctorMCertUrlListload && value.doctorMCertUrlListload[0].response) {
            value.doctorMCert = value.doctorMCertUrlListload[0].response.data.url
        }
        value.hospitalId = hospitalId
        for (let i = 0; i < hospitalNameData.length; i++) {
            if (hospitalNameData[i].value == hospitalId) {
                value.hospitalName = hospitalNameData[i].label
            }
        }
        value.deptSecondId = deptSecondId
        for (let i = 0; i < deptName.length; i++) {
            if (deptName[i].value == deptSecondId) {
                value.deptSecondName = deptName[i].label
            }
        }
        if (dataValue) {
            if (dataValue.headUrl) {
                if (!value.headUrl) {
                    value.headUrl = dataValue.headUrl
                }
            }
            if (dataValue.idCardFront) {
                if (!value.hospitalId) {
                    value.idCardFront = dataValue.idCardFront
                }
            }
            if (dataValue.idCardBack) {
                if (!value.idCardBack) {
                    value.idCardBack = dataValue.idCardBack
                }
            }
            if (dataValue.doctorQCert) {
                if (!value.doctorQCert) {
                    value.doctorQCert = dataValue.doctorQCert
                }
            }
            if (dataValue.doctorMCert) {
                if (!value.doctorMCert) {
                    value.doctorMCert = dataValue.doctorMCert
                }
            }
            if (dataValue.deptSecondId) {
                if (!value.deptSecondId) {
                    value.deptSecondId = dataValue.deptSecondId
                }
            }
            if (dataValue.hospitalId) {
                if (!value.hospitalId) {
                    value.hospitalId = dataValue.hospitalId
                }
            }
        }
        console.log(value, '[[[[[[[[[')
        const response = await doctorAttestation(value)
        if (response.code == 200) {
            message.success('提交成功');
            getDataopoo()
        } else {
            message.error('提交失败!' + response.message);
        }
    }
    const processUrl = (url: any) => {
        if (url.includes('http')) {
            return url.split('/upload')[1] ? '/upload' + url.split('/upload')[1] : url;
        }
        return url;
    }
    const approve = async (item: Object) => {
        const hide = message.loading('正在处理');
        item.id = id;
        try {
            const response = await approveDoctor(item);
            if (response.code == 200) {
                message.success('处理成功,即将跳转列表页面');
                if (open) {
                    setOpen(false);
                }
                history.push('/doctor/auth-list');
            } else {
                message.error('处理失败!');
            }
            hide();
        } catch (error) {
            hide();
            message.error('处理失败');
            return false;
        }
    };
    const debounce = (func, delay = 300) => {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => {
                func.apply(this, args);
            }, delay);
        };
    };
    const loadOptions = debounce((value: any) => {
        if (!dataF) {
            return false;
        }
        if (!value) {
            return false;
        }
        getData(value);
    }, 1000);
    const getData = async (value: any) => {
        setdataF(true)
        const data = await hospitalInfo({ vague: value })
        const valuepp = data.data.map(item => ({
            label: item.hospitalName,
            value: item.id,
            data: item.advanceDepts
        }));
        sethospitalNameData(valuepp)


    }
    const lightOff = async () => {
        await setdataStatus(5)
        // await getData(dataValue.hospitalName);
        // loadOptionsTwo()
    }
    const loadOptionsTwo = () => {
        for (let i = 0; i < hospitalNameData.length; i++) {
            if (hospitalNameData[i].value == hospitalId) {
                const valuepp = hospitalNameData[i].data.map(item => ({
                    label: item.advanceDeptName,
                    value: item.advanceDeptId,
                }));
                setdeptName(valuepp)

            }
        }
    }
    const setvisibleGB = () => {
        setvisible(true)
    }
    const setvisibleDk = () => {
        setvisible(false)
    }
    const formItemLayout = {
        labelCol: { span: 2 },
        wrapperCol: { span: 5 },
    };
    return (
        <PageContainer content="">
            {
                dataStatus == 1 ?
                    < Card bordered={false}>
                        <div style={{ marginBottom: '16px' }}>您的身份认证已通过，如修改信息需重新认证审核。<span onClick={lightOff} style={{ color: '#0371FF' }}>修改认证</span></div>
                        <Descriptions
                            column={1}
                            labelStyle={{
                                width: '150px',
                                marginRight: '10px',
                                display: 'block',
                                textAlign: 'right',
                            }}
                        >
                            <Descriptions.Item label="医生">{dataValue ? dataValue.name : ''}</Descriptions.Item>
                            <Descriptions.Item label="职业头像">
                                <Avatar src={dataValue.headUrl ? 'http://oss.yizuoyiyou.com.cn' + dataValue.headUrl : yishn} size={64} />
                            </Descriptions.Item>
                            <Descriptions.Item label="医院">{dataValue ? dataValue.hospitalName : ''}</Descriptions.Item>
                            <Descriptions.Item label="科室">{dataValue ? dataValue.deptSecondName : ''}</Descriptions.Item>
                            <Descriptions.Item label="擅长疾病">{dataValue ? dataValue.diseaseTxt : ''}</Descriptions.Item>
                            <Descriptions.Item label="临床专长">
                                {dataValue ? dataValue.clinicalExpertise : ''}
                            </Descriptions.Item>
                            <Descriptions.Item label="职称">{dataValue ? dataValue.doctorTitle : ''}</Descriptions.Item>

                            {/* <Descriptions.Item label="医师资格证">
                                {' '}
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorQCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item> */}
                            <Descriptions.Item label="执业医师证">
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorMCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item>
                            {dataValue && dataValue.status == 2 ? (
                                <Descriptions.Item label="驳回原因">{dataValue ? dataValue.failReason : ''}</Descriptions.Item>
                            ) : null}
                        </Descriptions>

                    </Card> : ''
            }
            {
                dataStatus == 0 ?
                    <Card bordered={false}>
                        <div style={{ marginBottom: '16px' }}> 您的身份认证审核中。</div>
                        <Descriptions
                            column={1}
                            labelStyle={{

                                width: '150px',
                                marginRight: '10px',
                                display: 'block',
                                textAlign: 'right',
                            }}
                        >
                            <Descriptions.Item label="医生">{dataValue ? dataValue.name : ''}</Descriptions.Item>
                            <Descriptions.Item label="职业头像">
                                <Avatar src={dataValue.headUrl ? 'http://oss.yizuoyiyou.com.cn' + dataValue.headUrl : yishn} size={64} />
                            </Descriptions.Item>
                            <Descriptions.Item label="医院">{dataValue ? dataValue.hospitalName : ''}</Descriptions.Item>
                            <Descriptions.Item label="科室">{dataValue ? dataValue.deptSecondName : ''}</Descriptions.Item>
                            <Descriptions.Item label="擅长疾病">{dataValue ? dataValue.diseaseTxt : ''}</Descriptions.Item>
                            <Descriptions.Item label="临床专长">
                                {dataValue ? dataValue.clinicalExpertise : ''}
                            </Descriptions.Item>
                            <Descriptions.Item label="职称">{dataValue ? dataValue.doctorTitle : ''}</Descriptions.Item>

                            {/* <Descriptions.Item label="医师资格证">
                                {' '}
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorQCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item> */}
                            <Descriptions.Item label="执业医师证">
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorMCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item>
                        </Descriptions>
                    </Card> : ''
            }
            {
                dataStatus == 2 ?
                    <Card bordered={false}>
                        <div style={{ marginBottom: '16px' }}>  因 <span>{String.fromCharCode(123)} </span>{dataValue.failReason} <span> {String.fromCharCode(125)}</span> ，您的认证信息审核不通过，请重新 <span onClick={lightOff} style={{ color: '#0371FF' }}>申请认证 </span></div>
                        <Descriptions
                            column={1}
                            labelStyle={{

                                width: '150px',
                                marginRight: '10px',
                                display: 'block',
                                textAlign: 'right',
                            }}
                        >
                            <Descriptions.Item label="医生">{dataValue ? dataValue.name : ''}</Descriptions.Item>
                            <Descriptions.Item label="职业头像">
                                <Avatar src={dataValue.headUrl ? 'http://oss.yizuoyiyou.com.cn' + dataValue.headUrl : yishn} size={64} />
                            </Descriptions.Item>
                            <Descriptions.Item label="医院">{dataValue ? dataValue.hospitalName : ''}</Descriptions.Item>
                            <Descriptions.Item label="科室">{dataValue ? dataValue.deptSecondName : ''}</Descriptions.Item>
                            <Descriptions.Item label="擅长疾病">{dataValue ? dataValue.diseaseTxt : ''}</Descriptions.Item>
                            <Descriptions.Item label="临床专长">
                                {dataValue ? dataValue.clinicalExpertise : ''}
                            </Descriptions.Item>
                            <Descriptions.Item label="职称">{dataValue ? dataValue.doctorTitle : ''}</Descriptions.Item>

                            {/* <Descriptions.Item label="医师资格证">
                                {' '}
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorQCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item> */}
                            <Descriptions.Item label="执业医师证">
                                <Image
                                    src={dataValue ? 'http://oss.yizuoyiyou.com.cn' + dataValue.doctorMCert : ''}
                                    width={100}
                                    height={80}
                                />
                            </Descriptions.Item>
                        </Descriptions>
                    </Card> : ''
            }
            {
                dataStatus == 4 || dataStatus == 5 ? <Card bordered={false}>
                    <ProForm
                        style={{ margin: 'auto', marginTop: 8 }}
                        name="basic"
                        layout="horizontal"
                        onFinish={onFinish}
                        {...formItemLayout}
                        request={async () => {
                            return queryAuthDoctorDetail({ id: currentUser.id }).then(({ data }) => {
                                if (dataStatus != 5) {
                                    setdataStatus(data == null ? 4 : data.status)
                                }
                                // data.hospitalId = ''
                                // data.hospitalName = ''
                                // data.deptSecondId = ''
                                // data.deptSecondName = ''
                                setdataValue(data)

                                if (data.headUrl) {
                                    data.upload = [
                                        {
                                            uid: '1',
                                            name: 'icon',
                                            status: 'done',
                                            url: 'http://oss.yizuoyiyou.com.cn' + data.headUrl
                                        },
                                    ];
                                }
                                // if (data.idCardFront) {
                                //     data.idCardFrontload = [
                                //         {
                                //             uid: '1',
                                //             name: 'icon',
                                //             status: 'done',
                                //             url: 'http://oss.yizuoyiyou.com.cn' + data.idCardFront
                                //         },
                                //     ];
                                // }
                                // if (data.idCardBack) {
                                //     data.idCardBackload = [
                                //         {
                                //             uid: '1',
                                //             name: 'icon',
                                //             status: 'done',
                                //             url: 'http://oss.yizuoyiyou.com.cn' + data.idCardBack
                                //         },
                                //     ];
                                // }
                                if (data.doctorQCert) {
                                    data.doctorQCerttUrlListload = [
                                        {
                                            uid: '1',
                                            name: 'icon',
                                            status: 'done',
                                            url: 'http://oss.yizuoyiyou.com.cn' + data.doctorQCert
                                        },
                                    ];
                                }
                                if (data.doctorMCert) {
                                    data.doctorMCertUrlListload = [
                                        {
                                            uid: '1',
                                            name: 'icon',
                                            status: 'done',
                                            url: 'http://oss.yizuoyiyou.com.cn' + data.doctorMCert
                                        },
                                    ];
                                }
                                console.log('data', data);
                                return data;
                            });

                        }}
                        submitter={{
                            searchConfig: {
                                resetText: '重置',
                                submitText: '提交申请',
                            },

                            render: (props, doms) => {
                                return (
                                    <Row>
                                        <Col span={14} offset={2}>
                                            <Space>{doms}</Space>
                                        </Col>
                                    </Row>
                                );
                            },
                            resetButtonProps: {
                                style: {
                                    display: 'none',
                                },
                            }
                        }}
                    >
                        <div style={{ marginBottom: '20px' }}> 请填写下列资料完成身份认证</div>
                        <ProFormText
                            width="md"
                            label="真实姓名"
                            name="name"
                            disabled={dataStatus != 4}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入真实姓名',
                                },
                            ]}
                            placeholder="请输入真实姓名"
                        />
                        <ProFormUploadButton
                            name="upload"
                            label="头像"
                            max={1}
                            fieldProps={{
                                name: 'file',
                                listType: 'picture-card',
                            }}
                            // rules={[
                            //     {
                            //         required: true,
                            //         message: '请选择头像',
                            //     },
                            // ]}
                            action="/api/file/upload"

                        />
                        <div style={{ lineHeight: '30px', marginLeft: '144px', marginTop: '-20px', marginBottom: '20px' }}> 请上传清晰职业照，<span style={{ color: '#0371FF' }} onClick={setvisibleGB}> 查看示例</span></div>
                        <ProFormSelect
                            width="md"
                            name="hospitalName"
                            label="执业医院"
                            fieldProps={{
                                showSearch: true,
                                onSearch: loadOptions,
                                onChange: (value) => {
                                    sethospitalId(value)
                                },
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请选择执业医院',
                                },
                            ]}
                            options={hospitalNameData}


                        />
                        <ProFormSelect
                            width="md"
                            name="deptSecondName"
                            label="所属科室"
                            fieldProps={{
                                onFocus: loadOptionsTwo,
                                onChange: (value) => {
                                    setdeptSecondId(value)
                                },
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请选择所属科室',
                                },
                            ]}
                            options={deptName}
                        />
                        <ProFormSelect
                            width="md"
                            name="doctorTitle"
                            label="职称"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择职称',
                                },
                            ]}
                            request={async ({ keyWords }) => {
                                let query = {
                                    pageNum: 1,
                                    pageSize: 20,
                                    dictCode: "physicianTitle"
                                };
                                return listByCode(query).then(({ data }) => {
                                    return data.map((item: any) => {
                                        return {
                                            label: item.itemName,
                                            value: item.itemName,
                                        };
                                    });
                                });
                            }}

                        />
                        <ProFormTextArea name="diseaseTxt" label="擅长疾病" placeholder="请输入擅长疾病" width="md" />
                        {/* <ProFormTextArea name="introduction" label="简介" placeholder="请输入简介" width="md" /> */}
                        <ProFormTextArea name="clinicalExpertise" label="临床专长" placeholder="请输入临床专长" width="md" />
                        {/* <ProFormUploadButton
                            name="idCardFrontload"
                            label="身份证正面照"
                            max={1}
                            fieldProps={{
                                name: 'file',
                                listType: 'picture-card',
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请上传身份证正面照',
                                },
                            ]}
                            action="/api/file/upload"
                        />
                        <ProFormUploadButton
                            name="idCardBackload"
                            label="身份证反面照"
                            max={1}
                            fieldProps={{
                                name: 'file',
                                listType: 'picture-card',
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请上传身份证反面照',
                                },
                            ]}
                            action="/api/file/upload"
                        /> */}
                        {/* <ProFormUploadButton
                            name="doctorQCerttUrlListload"
                            label="医师资格证"
                            max={1}
                            fieldProps={{
                                name: 'file',
                                listType: 'picture-card',
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请上传医师资格证',
                                },
                            ]}
                            action="/api/file/upload"
                        /> */}
                        <ProFormUploadButton
                            name="doctorMCertUrlListload"
                            label="执业医师证"
                            max={1}
                            fieldProps={{
                                name: 'file',
                                listType: 'picture-card',
                            }}
                            rules={[
                                {
                                    required: true,
                                    message: '请输入执业医师证',
                                },
                            ]}
                            action="/api/file/upload"
                        />
                    </ProForm>
                </Card> : null
            }
            <Modal
                visible={visible}
                title="医生头像示例"
                onOk={setvisibleDk}
                footer={[
                    <Button key="关闭" type="primary" onClick={setvisibleDk}>
                        我知道了
                    </Button>]}
            >
                <div style={{ textAlign: 'center' }}>
                    <div><img src={laca} alt="" width={300} /></div>
                    <div>正面免冠，jpg、png格式，大小不超过5M</div>
                </div>
            </Modal>
        </PageContainer >
    );
};

export default BasicForm;
